<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../scripts/ext-3.3.1/resources/css/ext-all.css"/>
	<link rel="stylesheet" type="text/css" href="../styles/global.css"/>
	<link rel="stylesheet" type="text/css" href="../styles/elements.css"/>
	<link rel="stylesheet" type="text/css" href="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.css" />
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../scripts/jquery-ui-1.8.16/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../scripts/ext-3.3.1/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="../scripts/ext-3.3.1/ext-all.js"></script>
	<script type="text/javascript" src="../scripts/extjs-plus.js"></script>
	<script type="text/javascript">
	Ext.onReady(function(){
		list();
	});
	function list(){
		var mask = new Ext.LoadMask(Ext.getBody(),{msg:"加载中。。。"});
		mask.show();
		Ext.Ajax.request({
			url:"<s:url action='cx/dzcx_list'/>",
			success:function(response,config){
				mask.hide();
				var json = Ext.decode(response.responseText);
				if(json.success==1){
					for(var i=0;i<json.data.length;i++){
						var html = $("<button class='item' id='"+json.data[i].id+"' onclick='cx_item("+json.data[i].id+")'>"+json.data[i].bt+"</button>");
						html.appendTo($("#list"));
					}
					$("#list .item").button();
				}else{
					Ext.MessageBox.alert("错误","查询失败！");
				}
			},
			failure:function(response,config){
				mask.hide();
			}
		});
	}
	function cx_item(dzcxId){
		var mask = new Ext.LoadMask(Ext.getBody(),{msg:"加载中。。。"});
		mask.show();
		Ext.Ajax.request({
			url:"<s:url action='cx/dzcx_item'/>?dzcxId="+dzcxId,
			success:function(response,config){
				mask.hide();
				var data = Ext.decode(response.responseText);
				if(data.success==1){
					cx_load(data);
				}else{
					Ext.MessageBox.alert("错误","查询失败！");
				}
			},
			failure:function(response,config){
				mask.hide();
			}
		});
	}
	function cx_load(data){
		if(data && data.dzcx && data.column){
			var dzcx = data.dzcx;
			var column = data.column;
			/* construct column model and data record structure*/
			var cm = [new Ext.grid.RowNumberer()];
			var record = [{name:'index',type:'int'}];
			var gridwidth = 0;
			for(var i=0;i<column.length;i++){
				var cm_item = {header:column[i].mc,dataIndex:column[i].dm,sortable:true,css:"padding:0;"};
				if(column[i].sjlx){
					cm_item.align=column[i].sjlx;
				}
				if(column[i].renderer){
					var renderer = Ext.util.Format.htmlDecode(column[i].renderer);
					eval("cm_item.renderer="+renderer);
				}
				var width = parseInt(column[i].width);
				if(width>0){
					cm_item.width=width;
				}
				cm.push(cm_item);
				var record_item = {name:column[i].dm};
				record.push(record_item);
				gridwidth+=column[i].width;
			}
			if(gridwidth<500){
				gridwidth=500;
			}else{
				gridwidth = gridwidth+40;
			}
			/* construct params for creating grid panel */
			var o = {
				cm: new Ext.grid.ColumnModel(cm),
				record:new Ext.data.Record.create(record),
				url:"<s:url action='cx/dzcx_data'/>?dzcxId="+dzcx.id,
				showBottomBar:true,
				start:0,
				limit:20,
				width:gridwidth
			};
			var gridpanel = create_gridpanel(o);
			
			var win = new Ext.Window({
				title:dzcx.bt,
				width:gridwidth+10,
				autoHeight:true,
				closeAction:'close',
				modal:true,
				y:5,
				items:[{
					html:dzcx.sm?dzcx.sm:dzcx.bt,
					width:gridwidth,
					autoHeight:true,
					bodyStyle:"padding:5px"
				},gridpanel]
			});
			win.show();
		}
	}
	</script>
	<style>
	#list .item{
		float:left;
		display:inline-block;
		margin:10px;
		padding:5px;
		cursor:pointer;
	}
	</style>
</head>
<body>
<div id="list"></div>
</body>
</html>